<template>
  <a class="home-live-item" :href="props.path">
    <div class="left">
      <div
        class="img"
        :style="{'background': 'url(_nuxt'+props.img+')','background-size': 'cover'}"
      >
        <div class="mask">
          <i class="play" />
        </div>
        <div class="live-state">
          <div class="top" :class="props.liveState?'live-play':'live-await'">
            <span>{{props.liveState?'正在直播':'预约直播'}}</span>
          </div>
          <div class="bottom"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">{{props.title}}</div>
      <span class="time" v-if="!props.liveState">{{props.time}}</span>
      <span class="hot" v-if="props.liveState">{{props.hot}} 热度</span>
    </div>
  </a>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  @Prop() props!: object;
  //   let {title,
  // img,
  // path,
  // time,
  // hot,
  // liveState,
  // }=this.props;

  //   @Prop() title!: string;
  //   @Prop() img!: string;
  //   @Prop() path!: string;
  //   @Prop() time!: string;
  //   @Prop() hot!: number;
  //   @Prop() liveState!: boolean;
}
</script>

<style lang='less' scoped>
.home-live-item {
  .wh(100%, auto);
  .flex-box(row);
  margin-top: 15px;
  text-decoration: none;

  .left,
  .right {
    .wh(50%, 70px);
  }
}
.home-live-item:hover .mask {
  opacity: 0.6;
  .play {
    .wh(32px);
    background: url("~@/assets/images/home/play.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
}
.img {
  .wh(100%, 70px);
  border-radius: 5px;
  position: relative;
  .mask {
    position: absolute;
    .wh(100%);
    .flex-box(row);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    opacity: 0;
    transition: 0.3s;
    .play {
      .wh(64px);
      transition: 0.3s;
    }
  }
  .live-state {
    position: absolute;
    top: 0;
    .wh(100%);
    .top {
      .wh(100%, 50%);
      padding-top: 4px;
      padding-left: 25px;

      span {
        color: #fff;
        font-size: 12px;
      }
    }

    .bottom {
      .wh(100%, 50%);
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
    }
  }
}
.right {
  .flex-box(column, space-between, flex-start);
  padding-left: 5px;
  .title {
    .wh(100%, 50px);
    color: #000;
  }
  span {
    font-size: 12px;
    color: #999aaa;
  }
}
.live-play {
  background: url("~@/assets/images/home/livePlay.gif") 5px 5px;
  background-size: 65% auto;
  background-repeat: no-repeat;
}
.live-await {
  background: url("~@/assets/images/home/liveAwait.png") 5px 5px;
  background-size: 65% auto;
  background-repeat: no-repeat;
}
</style>